<template>
    <div>
        <!-- 顶部（全部-筛选-价格）组件 -->
        <van-dropdown-menu>
            <van-dropdown-item v-model="value1" :options="option1" disabled title="全部" />
            <van-dropdown-item v-model="value2" :options="option2" title="价格" @change="priceChange"/>
            <van-dropdown-item v-model="value3" :options="filterCategory" title="分类" @change="categoryChange"/>
        </van-dropdown-menu>
        <!-- 如果搜不到:搜索提示:搜索的类别商品为空时 -->
        <van-empty image="search" description="抱歉没有搜索到该商品"  v-if="goodsList.length==0" class=""/>
        <!-- 如果搜到了:商品列表下方的产品展示组件 -->
        <!-- 将商品列表数组传递给商品列表子组件 -->
        <productsConListVue v-else  :goodsList="goodsList"></productsConListVue>
    </div>
</template>

<script>
// 引入产品展示组件
import productsConListVue from './productsConList.vue';
export default {
    name: '',
    data() {
        return {
            // value	当前选中项对应的 value，可以通过v-model双向绑定
            value1: '',
            value2: 'desc',//选中的价格的排序方式
            // value3: '2',
            option1: [],
            option2: [
                { text: '价格由高到低', value: 'desc' },
                { text: '价格由低到高', value: 'asc' },
            ],
        };
    },
    // 拿到父组件里的分类数组和搜索到的商品列表数组
    props: ['filterCategory', 'goodsList'],
    components: {
        productsConListVue
    },
    // 计算属性监听选项的变化,选项变,对应的value(内容也改变)
    computed: {
        value3: {
            get() {
                // 依赖属性改变计算属性,此处改变的是value3
                let val = "";
                this.filterCategory.map((item) => {
                    if (item.checked) {
                        val = item.value;
                    }
                });
                return val;
            },
            set(val) {
                console.log(val);
            }
        }
    },
    methods:{
        priceChange(val){
            this.$emit("sendpriceChange", val);//将价格排序后的数据传给父组件
        },
        categoryChange(val){
            this.$emit("sendcategoryChange", val);//将分类排序后的数据传给父组件
        }

    }


}

</script>
<style scoped>

</style>